<template>
  <div style="background: #fff">
    <!-- 导航栏 -->
    <NavBar fixed placeholder left-arrow :border="false" @click-left="onClickLeft">
      <template #left>
        <Icon color="#16142D" name="arrow-left" size="20" />
      </template>
      <template #title>
        <div style="font-family: PingFangSC-Regular; font-size: 16px; color: #16142d; font-weight: 400">#文章标题#</div>
      </template>
    </NavBar>
    <!-- 文章正文 -->
    <div class="textCentent">
      <div class="text">
        <!-- 文章标题 -->
        <div>手里有闲钱，应不应该提前还贷？</div>
        <div>
          <img
            src="../../assets/PrepaymentInformation/3.0.9.png"
            style="width: 32px; height: 32px; margin-right: 10px"
          />
          <div>
            <div>媒体名称</div>
            <div>2020-08-14 | 1178</div>
          </div>
        </div>
        <div></div>
      </div>
    </div>
    <!-- 计算器部分 -->
    <div class="calculator">
      <!-- 要不要提前还贷 -->
      <div class="calculatorBox">
        <!-- 要不要提前还贷标题 -->
        <div class="calculator_title">
          <div style="display: flex; align-items: center; justify-content: center; margin-top: 3px">
            <img
              src="../../assets/PrepaymentInformation/3.0.3.png"
              style="width: 39px; height: 15px; margin-right: 12px"
            />
            <div style="font-size: 14px; font-weight: 600; color: #16142d">要不要提前还贷？</div>
            <img
              src="../../assets/PrepaymentInformation/3.0.2.png"
              style="width: 39px; height: 15px; margin-left: 5px"
            />
          </div>
        </div>
        <!-- 要不要提前还贷内容 -->
        <div class="calculator_text">
          当一个家庭获得一笔资金的时候，要不要提前还贷成为一个问题，要想做出决策，你需要从以下两个方面考量。
        </div>
        <!-- 贷款利率vs投资利率 -->
        <div class="loans">
          <div>贷款利率VS投资利率</div>
          <div>如果有做投资的选择，可衡量贷款利率与投资利率，贷款利率更高时，提前还款意义更大。</div>
        </div>
        <!-- 目前是否处于还贷初期 -->
        <div class="loans">
          <div>目前是否处于还贷初期</div>
          <div>还款时间是否已过1/3左右，如果已过，还款中利息部分所占比重较小，提前还款意义不大。</div>
        </div>
      </div>
      <div class="prepayment">
        <div>
          <!-- 还款金额 -->
          <div class="juxing"></div>
          <div class="planAmount">
            <div>提前还款金额</div>
            <Field
              v-model="planAmount"
              type="number"
              placeholder="请输入提前还款的金额"
              class="planAmount_Field"
              maxlength="10"
              input-align="right"
              :border="false"
              @blur="planAmountChange"
            />
            <div>万元</div>
          </div>
        </div>
        <div class="bacg">
          <img src="../../assets/PrepaymentInformation/1805305501.png" />
        </div>
        <!-- 剩余贷款本金 -->
        <div class="prepayment_content">
          <div>
            <div class="juxing1"></div>
            <div class="prepayment_content_left">
              <div>剩余贷款本金</div>
              <img src="../../assets/prepaymentTest/info.png" class="infoimg" @click="isInfoClick1" />
            </div>
            <div class="prepayment_content_right">
              <Field
                v-model="residueAmount"
                type="number"
                placeholder="请输入目前剩余的贷款本金"
                class="prepayment_Field"
                style="width: 150px"
                maxlength="10"
                input-align="right"
                :border="false"
                @blur="residueAmountChenge"
              />
              <div>万元</div>
            </div>
          </div>
        </div>
        <div v-show="isInfo1 == true" class="info">
          <div>
            <img src="../../assets/prepaymentTest/info.png" class="infoimg" />
            <div>剩余贷款本金</div>
          </div>
          <div>指当前剩余贷款的金额。您可以通过贷款机构进行查询。</div>
        </div>
        <!-- 剩余还款期数 -->
        <div class="prepayment_content">
          <div>
            <div class="juxing1"></div>
            <div class="prepayment_content_left">
              <div>剩余还款期数</div>
              <img src="../../assets/prepaymentTest/info.png" class="infoimg" @click="isInfoClick2" />
            </div>
            <div class="prepayment_content_right">
              <Field
                v-model="residuePeriods"
                type="digit"
                placeholder="请输入目前贷款的剩余还款期数"
                class="prepayment_Field"
                style="width: 165px"
                maxlength="10"
                input-align="right"
                :border="false"
                @blur="residuePeriodsChenge"
              />
              <div>期</div>
            </div>
          </div>
        </div>
        <div v-show="isInfo2 == true" class="info">
          <div>
            <img src="../../assets/prepaymentTest/info.png" class="infoimg" />
            <div>剩余还款期数</div>
          </div>
          <div>指还需要继续偿还多少个月才能将贷款还清。您可以通过贷款机构进行查询。</div>
        </div>
        <!-- 贷款年利率 -->
        <div class="prepayment_content">
          <div>
            <div class="juxing1"></div>
            <div class="prepayment_content_left">
              <div>贷款年利率</div>
              <img src="../../assets/prepaymentTest/info.png" class="infoimg" @click="isInfoClick3" />
            </div>
            <div class="prepayment_content_right">
              <Field
                v-model="AnnualInterestRate"
                type="number"
                placeholder="请输入目前贷款的贷款年利率"
                class="prepayment_Field"
                style="width: 180px"
                maxlength="10"
                input-align="right"
                :border="false"
                @blur="AnnualInterestRateChenge"
              />
              <div>%</div>
            </div>
          </div>
        </div>
        <div
          v-show="isInfo3 == false"
          style="
            text-align: right;
            font-size: 10px;
            color: #9d9baf;
            -webkit-transform: scale(0.9);
            margin-top: 3px;
            margin-right: -15px;
            margin-bottom: 16px;
          "
        >
          可参照5年期贷款基准利率4.95%
        </div>
        <div v-show="isInfo3 == true" class="info">
          <div>
            <img src="../../assets/prepaymentTest/info.png" class="infoimg" />
            <div>贷款年利率</div>
          </div>
          <div>指本贷款的利率水平。您可以通过贷款机构进行查询。</div>
        </div>
        <!-- 还款方式 -->
        <div class="way">
          <div class="juxing1"></div>
          <div>还款方式</div>
          <div @click="showPopup">
            <div style="margin-right: 3px">{{ amount }}</div>
            <Icon name="arrow" style="color: #858593; font-size: 12px" />
          </div>
        </div>
        <div class="bacg2">
          <img src="../../assets/PrepaymentInformation/3.0.9.png" />
        </div>
        <!-- 年化投资收益率 -->
        <div class="prepayment_content">
          <div>
            <div class="juxing3"></div>
            <div class="prepayment_content_left">
              <div>年化投资收益率</div>
            </div>
            <div class="prepayment_content_right">
              <Field
                v-model="YearYield"
                type="number"
                placeholder="请输入目前年化投资收益率"
                class="prepayment_Field"
                style="width: 170px"
                maxlength="10"
                input-align="right"
                :border="false"
                @blur="YearYieldChenge"
              />
              <div>%</div>
            </div>
          </div>
        </div>
        <!-- 不提前还款与提前还款金额对比 -->
        <div class="comparison">
          <!-- 不提前还款vs提前还款 -->
          <div class="comparison_vs">
            <div>提前还款</div>
            <img src="../../assets/prepaymentTest/2.4.png" style="width: 40px; height: 37px" />
            <div>不提前还款</div>
          </div>
          <div>
            <div class="comparison_title1">
              <div>
                <div>节省利息支出</div>
                <p></p>
              </div>
              <div>
                <div>投资收益总额</div>
                <p></p>
              </div>
            </div>
            <div class="comparison_money1">
              <div><span>210000</span><span>元</span></div>
              <div><span>5000</span><span>元</span></div>
            </div>
            <div class="comparison_title2">
              <div>
                <div>月供少还</div>
                <p></p>
              </div>
              <div>
                <div>投资本金总额</div>
                <p></p>
              </div>
            </div>
            <div class="comparison_money2">
              <div><span>1900</span><span>元/月</span></div>
              <div><span>300000</span><span>元</span></div>
            </div>
            <div class="jiantou">
              <!-- <img src="../../assets/prepaymentTest/3.0.16.png" style="height: 21px;" /> -->
              <div>1700元/月</div>
              <img src="../../assets/prepaymentTest/8113848.png" style="height: 6px" />
              <div>1500元/月</div>
            </div>
            <div class="zhuyi">注：本测算结果是建立在假设基础之上，所得结果仅供参考，不能视作或代替专业意见。</div>
          </div>
        </div>
      </div>
    </div>
    <div style="padding-left: 16px; padding-right: 16px;">
      <div class="require">
        <div class="require_title">提前还款小贴士：</div>
        <div class="requires">须了解贷款机构以对于提前还款的要求：</div>
        <div class="require_text">
          <img src="../../assets/PrepaymentInformation/59.png" />
          <div><span>时间要求：</span><span>有的贷款机构对于提前还款有时间要求，比如：要求还款36期以上等。 </span></div>
        </div>
        <div class="require_text">
          <img src="../../assets/PrepaymentInformation/60.png" />
          <div>
            <span>金额要求：</span
            ><span>有的贷款机构对于提前还款有金额要求，比如：要求提前还款金额在50万元以上。 </span>
          </div>
        </div>
        <div class="require_text">
          <img src="../../assets/PrepaymentInformation/61.png" />
          <div><span>违约金/手续费：</span><span>有的贷款机构对于提前还款会收取相应的手续费或违约金。 </span></div>
        </div>
      </div>
    </div>
    <div class="button_img">
        <img  src="../../assets/PrepaymentInformation/button.png" />
    </div>
  </div>
  <Popup
    v-model:show="show"
    round
    position="bottom"
    :close-on-click-overlay="false"
    close-on-popstate
    :style="{ height: '293px' }"
  >
    <div
      style="
        font-size: 15px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(232, 234, 238, 1);
      "
    >
      <div style="color: #9d9baf" @click="show = false">取消</div>
      <div @click="affirm">确认</div>
    </div>
    <Picker
      v-model="selectedValues"
      style="margin-top: -50px; z-index: -1"
      :columns="columns"
      :show-toolbar="false"
      :option-height="48"
      @change="onChange"
    />
  </Popup>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
import { NavBar, Icon, Field, Popup, Picker } from 'vant'
// 定义计划还款金额变量
let planAmount = ref(Number)
const planAmountChange = (e) => {
  planAmount.value = Math.round(e.target._value * 100) / 100
  console.log('定义计划还款金额变量', planAmount.value)
}
// 剩余还款金额
let residueAmount = ref(Number)
const residueAmountChenge = (e) => {
  residueAmount.value = Math.round(e.target._value * 100) / 100
  console.log('剩余还款金额', residueAmount.value)
}
// 剩余还款期数
let residuePeriods = ref(Number)
const residuePeriodsChenge = (e) => {
  residuePeriods.value = Math.round(e.target._value * 100) / 100
  console.log('剩余还款期数', residuePeriods.value)
}
// 贷款年利率
let AnnualInterestRate = ref(Number)
const AnnualInterestRateChenge = (e) => {
  AnnualInterestRate.value = Math.round(e.target._value * 100) / 100
  console.log('贷款年利率', AnnualInterestRate.value)
}
// 年化投资收益率
let YearYield = ref(Number)
const YearYieldChenge = (e) => {
  YearYield.value = Math.round(e.target._value * 100) / 100
  console.log('年化投资收益率', YearYield.value)
}

// 弹窗里的选择器
const columns = [
  {
    text: '按月等额本息',
    value: '按月等额本息',
  },
  {
    text: '按月等额本金',
    value: '按月等额本金',
  },
]
let monthly = ref('')
let amount = ref('按月等额本息')
//选择器变化事件
const onChange = ({ selectedValues }) => {
  monthly.value = selectedValues.join(',')
  console.log(monthly.value)
}
const show = ref(false)
// 点击打开弹窗
const showPopup = () => {
  show.value = true
}
// 点击弹窗确认按钮
const affirm = () => {
  show.value = false
  amount.value = monthly.value
}
let isInfo1 = ref(false)
let isInfo2 = ref(false)
let isInfo3 = ref(false)
const isInfoClick1 = () => {
  if (isInfo1.value == false) {
    isInfo1.value = true
  } else {
    isInfo1.value = false
  }
}
const isInfoClick2 = () => {
  if (isInfo2.value == false) {
    isInfo2.value = true
  } else {
    isInfo2.value = false
  }
}
const isInfoClick3 = () => {
  if (isInfo3.value == false) {
    isInfo3.value = true
  } else {
    isInfo3.value = false
  }
}
</script>

<style scoped>
@import url(./style/PrepaymentInformation.css);
* {
  --van-cell-vertical-padding: 0;
  --van-cell-horizontal-padding: 0;
}
</style>